<!-- Created by henian.xu on 2018/1/12. -->

<template>
    <div class="tabs">
        <div class="header">
            <div class="btn prev"><i class="f-icon">&#xf011;</i></div>
            <div class="tab-nav">
                <div class="inner">
                    <div class="item">
                        <div class="label">1item item item</div>
                    </div>
                    <div class="item">
                        <div class="label">2item item item</div>
                    </div>
                    <div class="item">
                        <div class="label">3item item item</div>
                    </div>
                    <div class="item">
                        <div class="label">4item item item</div>
                    </div>
                    <div class="item">
                        <div class="label">5item item item</div>
                    </div>
                </div>
            </div>
            <div class="btn next"><i class="f-icon">&#xf012;</i></div>
            <div class="btn btn-main">btn</div>
        </div>
        <div class="body">
            <div class="tab-panel">panel1</div>
            <div class="tab-panel">panel2</div>
            <div class="tab-panel">panel3</div>
            <div class="tab-panel">panel4</div>
            <div class="tab-panel">panel5</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Tabs',
    data() {
        return {};
    },
    created() {},
};
</script>

<style lang="scss">
$navSize: 0.8rem;
.tabs {
    > .header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        min-height: $navSize;

        > .btn {
            flex: 0 0 auto;
        }
        > .prev,
        > .next {
            padding: $padding-small;
        }
        > .tab-nav {
            flex: 1 1 auto;
            overflow: auto;
            overflow-scrolling: touch;
            > .inner {
                height: 100%;
                display: inline-flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: stretch;

                > .item {
                    padding: 0 $padding;
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    > .label {
                        white-space: nowrap;
                    }
                }
            }
        }
    }
    > .body {
        .tab-panel {
            padding: $padding;
        }
    }
}
</style>
